<template>
<div>
    <el-button @click="printHandler">打印</el-button>
    <hr/>
    <!-- 默认获取第一张 pdf  可以是单个图片 -->
    <!-- <div> 当前页面:  {{ currentPage }} / {{ pageCount }}  </div>
    <pdf src="/jianli.pdf" ref="myPdf" @num-pages="pageCount=$event" @page-loaded="currentPage=$event"></pdf> -->
    
    <!-- 展示所有的 pdf 内容  page 当前显示的第几页-->
    <!-- <pdf v-for="i in numPages" :key="i" :src="src" :page="i" 
    style="display:inline-block;width:25%;"></pdf> -->

    <!-- 分页展示 pdf 内容  -->
    <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination" />
    <pdf :src="src" :page="page" ref="myPdf"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import Pagination from '@/components/Pagination.vue'
var loadingTask = pdf.createLoadingTask('/jianli.pdf')
export default {
name: "VuePdf",
components:{
    pdf,
    Pagination
},
data(){
   return{
       currentPage:0,   // 当前页面
       pageCount:0,     // 总页码
       src:loadingTask, // src pdf 路径地址
       numPages:undefined,  // 总页码
       page:1,   
       total:1,      // 总页码
       pageSize:1,   // 页码条数
   }
},
mounted(){
  this.src.promise.then(pdf=>{
      this.numPages = pdf.numPages;
      this.total = pdf.numPages;
  })
},
methods:{
    // 分页
    getPagination(page){
        this.page = page;
    },
    // 打印
    printHandler(){
       this.$refs.myPdf.print();
    }
}
}
</script>
<style lang="less" scoped>
   .el-button{
       margin-bottom:10px;
   }

</style>